<template>
  <div>


    <el-button type="text" @click="addDialogFormVisible = true">新增</el-button>
    <el-button type="text" @click="deleteAssign">删除</el-button>

    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input @change="search" v-model="query.dep" placeholder="部门"></el-input>
      </el-form-item>
    </el-form>

    <el-table
      highlight-current-row
      :data="tableData"
      @current-change="handleCurrentChange"
      style="width: 100%">
      <el-table-column
        prop="ynName"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="ynDepartmentName"
        label="部门">
      </el-table-column>

      <el-table-column
        prop="entryDay"
        label="入职日期">
      </el-table-column>

      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="addDay(scope.$index, tableData)"
            type="text">
            + 业绩
          </el-button>

          <el-button
            @click.native.prevent="addMonth(scope.$index, tableData)"
            type="text">
            + 月任务
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog title="" :visible.sync="addDialogFormVisible">
      <el-form :model="form" label-width="10%">
        <el-form-item label="名称">
          <el-input v-model="form.ynName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-radio-group v-model="radioValue" @change="changeRedio">
            <el-radio
              v-for="item in radioOptions"
              :key="item.id"
              :label="item.id">
              {{ item.ynName }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="入职日期">
          <el-date-picker
            v-model="form.entryDay"
            format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="" :visible.sync="inputDayDialog">
      <el-form :model="addForm" label-width="10%">
        <el-form-item label="名称">
          <el-input :disabled="true" v-model="addForm.ynAssignName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input :disabled="true" v-model="addForm.ynDepartmentName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="addForm.ynDay"
            format="yyyy-MM-dd"
            type="date"
            @change="changeDate"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="序号">
          <el-input-number v-model="addForm.ynSort" :min="1" :max="1000" label="序号"></el-input-number>
        </el-form-item>

        <el-form-item label="业绩">
          <el-input v-model="addForm.ynTarget" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目">
          <el-input v-model="addForm.ynProject" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <template>
            <el-radio v-model="addForm.ynType" label="1">新开</el-radio>
            <el-radio v-model="addForm.ynType" label="2">续费</el-radio>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="inputDayDialog = false">取 消</el-button>
        <el-button type="primary" @click="inputDay">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="" :visible.sync="monthTargetDialog">
      <el-form :model="addMonthForm" label-width="10%">
        <el-form-item label="名称">
          <el-input :disabled="true" v-model="addMonthForm.ynAssignName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input :disabled="true" v-model="addMonthForm.ynDepartmentName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="addMonthForm.ynMonth"
            format="yyyy-MM"
            type="month"
            @change="changeDate"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="月任务">
          <el-input v-model="addMonthForm.ynTarget" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="monthTargetDialog = false">取 消</el-button>
        <el-button type="primary" @click="inputMonth">确 定</el-button>
      </div>
    </el-dialog>

  </div>


</template>

<script>

import moment from "moment";
import {Message} from "element-ui";

export default {
  name: "ynAssign",
  created() {
    this.addForm.ynDay = moment().format('yyyy-MM-DD')
    this.getYnAssign()
    this.fetchRadioOptions()
  },
  methods: {
    getYnAssign: function () {
      this.axios.post('/ynAssign/list').then(res => {
        if (!!res.data.data) {
          this.tableData = res.data.data;
        }
      })
    },
    changeDate(val) {
      // this.form.ynDay = moment(val).format('yyyy-MM-dd');
    },
    addDay(index, rows) {
      this.addForm.ynAssignName = rows[index].ynName;
      this.addForm.ynAssign = rows[index].id;
      this.addForm.ynDepartmentName = rows[index].ynDepartmentName;
      this.addForm.ynDepartment = rows[index].ynDepartment;
      this.inputDayDialog = true;
    },
    addMonth(index, rows) {
      this.addMonthForm.ynAssignName = rows[index].ynName;
      this.addMonthForm.ynAssign = rows[index].id;
      this.addMonthForm.ynDepartmentName = rows[index].ynDepartmentName;
      this.addMonthForm.ynDepartment = rows[index].ynDepartment;
      this.addMonthForm.ynMonth = moment().format('yyyy-MM')
      this.monthTargetDialog = true;
    },
    inputDay() {
      this.axios.post('/ynDay/saveOrUpdate', {
        ...this.addForm,
        ynDay: moment(this.addForm.ynDay).format('yyyy-MM-DD')
      }).then(res => {
        if (200 === res.data.code) {
          this.inputDayDialog = false;
          Message.success('成功');
        }
      })
    },
    inputMonth() {
      this.axios.post('/ynMonthTarget/saveOrUpdate', {
        ...this.addMonthForm,
        ynMonth: moment(this.addMonthForm.ynMonth).format('yyyy-MM')
      }).then(res => {
        if (200 === res.data.code) {
          this.monthTargetDialog = false;
          Message.success('成功');
        }
      })
    },
    search(v) {
      this.axios.post('/ynAssign/list', {ynDepartmentName: this.query.dep}).then(res => {
        if (!!res.data.data) {
          this.tableData = res.data.data;
        }
      })
    },
    saveOrUpdate() {
      this.axios.post('/ynAssign/saveOrUpdate', {
        ...this.form,
        entryDay: !!this.form.entryDay ? moment(this.form.entryDay).format('yyyy-MM-DD') : ''
      }).then(res => {
        if (200 === res.data.code) {
          Message.success('成功');
          this.addDialogFormVisible = false;
          this.getYnAssign();
        }
      })
    },
    update() {
      this.addDialogFormVisible = true;
    },
    deleteAssign() {
      this.axios.post('/ynAssign/delete', this.currentRow).then(res => {
        if (200 === res.data.code) {
          Message.success("成功");
          this.getYnAssign();
        }
      })
    },
    fetchRadioOptions() {
      this.axios.post('/ynDepartment/list').then(response => {
        this.radioOptions = response.data.data; // 假设响应格式为 { data: [] }
      });
    },
    changeRedio(vId) {
      let obj = {};
      obj = this.radioOptions.find((item) => {  //这里的radioPay就是上面遍历的数据源
        return item.id === vId;  //筛选出匹配数据，这里的value是你遍历数组每一项的value，如果没有对后台返回的数据做处理，一般为id
      });
      this.form.ynDepartmentName = obj.ynName;
      this.form.ynDepartment = obj.id;
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    }
  },
  data() {
    return {
      tableData: [],
      currentRow: null,
      form: {
        ynName: '',
        ynDepartment: '',
        ynDepartmentName: '',
        entryDay: '',
      },
      addMonthForm: {
        ynName: '',
        ynDepartment: '',
        ynDepartmentName: '',
        ynMonth: '',
        ynTarget: '',
      },
      addForm: {
        ynAssignName: '',
        ynAssign: '',
        ynDepartment: '',
        ynDepartmentName: '',
        ynTarget: '',
        ynDay: '',
        ynType: '1',
        ynProject: '',
        ynSort: '',
      },
      query: {dep: ''},
      addDialogFormVisible: false,
      monthTargetDialog: false,
      inputDayDialog: false,
      radioValue: '', // 选中的单选按钮的值
      radioOptions: [] // 存储从接口获取的数据
    }
  }
}
</script>

<style scoped>

</style>
